<template>
    <div class="performance-title">
    </div>
    <div class="noisenav">
        <div class="item" :class="nav===1?'active':''" @click="navChange(1)">高频噪声发生地带</div>
        <div class="item" :class="nav===2?'active':''" @click="navChange(2)">群众评价</div>
    </div>
    <div v-show="nav===1">
        <div class="performance-title1">
            <div class="tl1">预警等级</div>
            <div class="tl2">噪声位置</div>
            <div class="tl3">发生次数</div>
        </div>
        <div class="performance-content">
            <div class="item" v-for="(item,index) in list" :key="index">
                <div class="tl1">{{ item.name }}</div>
                <div class="tl2">{{ item.num }}</div>
                <div class="tl3">{{ item.num1 }}</div>
            </div>
        </div>
    </div>
    <div v-show="nav===2">
        <div class="performance-title1">
            <div class="tl2">部门名称</div>
            <div class="tl4">评价星级</div>
        </div>
        <div class="performance-content">
            <div class="item" v-for="(item,index) in pjlist" :key="index">
                <div class="tl2">{{ item.name }}</div>
                <div class="tl4">
                    <img class="img" src="../../../assets/fengjie/icon23.png" alt="" v-for="ited in item.num" :key="ited">
                </div>
            </div>
        </div>
    </div>
</template>

<script setup lang="ts">
import { ref } from 'vue';
let list = ref([
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'24'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'16'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'36'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'102'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'77'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'46'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'6'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'88'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'96'},
    {name:'多次',num:'夔州东路奉节县人民医院左侧',num1:'35'}
])

let pjlist = ref([
    {name:'县城市管理局',num:5},
    {name:'县交通运输委',num:5},
    {name:'县生态环境局',num:5},
    {name:'县住房城乡建委',num:5},
    {name:'县文化旅游委',num:5},
    {name:'县港航海事事务中心',num:3},
    {name:'县城市管理局',num:5},
    {name:'县交通运输委',num:5},
    {name:'县生态环境局',num:5},
    {name:'县住房城乡建委',num:5},
    {name:'县文化旅游委',num:5},
    {name:'县港航海事事务中心',num:3},
])

let nav = ref(1)
function navChange(type:number){
    if(nav.value === type) return;
    nav.value = type
}
</script>

<style lang="less" scoped>
.performance-title{
    width: 100%;
    height: 44px;
    margin: 16px 0 12px 0;
    background-image: url("../../../assets/fengjie/icon19.png");
    background-size: 100% 100%;
    box-sizing: border-box;
    padding-right: 17px;
    span{
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: #159AFF;
        float: right;
        line-height: 44px;
        cursor: pointer;
    }
}
.noisenav{
    margin-top: 12px;
    width: 100%;
    display: flex;
    align-items: center;
    justify-content: space-between;
    .item{
        width: 255px;
        height: 32px;
        line-height: 32px;
        text-align: center;
        background-image: url("../../../assets/fengjie/icon20.png");
        background-size: 100% 100%;
        font-family: PingFangSC-Regular;
        font-weight: 400;
        font-size: 14px;
        color: rgba(255, 255, 255, .7);
        cursor: pointer;
    }
    .active{
        color: rgba(255, 255, 255, 1) !important;
        background-image: url("../../../assets/fengjie/icon21.png") !important;
    }
}
.performance-title1{
    width: 100%;
    height: 28px;
    background: rgba(2, 49, 100, .2);
    margin-top: 12px;
    box-sizing: border-box;
    padding: 0 16px 0 12px;
    display: flex;
    align-items: center;
    font-family: PingFangSC-Regular;
    font-weight: 400;
    font-size: 12px;
    color: #159AFF;
    .tl1{
        width: 124px;
    }
    .tl2{
        flex: 1;
    }
    .tl3{
        width: 115px;
    }
    .tl4{
        width: 206px;
    }
}
/* 隐藏滚动条轨道 */
.performance-content::-webkit-scrollbar {
    display: none; /* 对于Chrome和Safari */
}
.performance-content{
    width: 100%;
    height: 245px;
    overflow-y: scroll;
    .item{
        width: 100%;
        height: 32px;
        margin-top: 4px;
        font-family: PingFangSC-SNaNpxibold;
        font-weight: 600;
        font-size: 12px;
        color: #D0DEEE;
        display: flex;
        align-items: center;
        box-sizing: border-box;
        padding: 0 16px 0 12px;
        .tl1{
            width: 124px;
            color: #FF3838 !important;
        }
        .tl2{
            flex: 1;
        }
        .tl3{
            width: 115px;
        }
        .tl4{
            width: 206px;
            display: flex;
            align-items: center;
            .img{
                width: 14px;
                height: 14px;
                margin-right: 16px;
            }
        }
    }
    .item:nth-child(odd){
        background: rgba(71, 138, 138, 0);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
    .item:nth-child(even){
        background: rgba(71, 107, 138, 0.1);
        box-shadow: inset 0 -1px 0 0 rgba(108, 128, 151, 0.5);
    }
}
</style>